//src/client/pages/list/index.js
//index 组件

import React from 'react';
import { Helmet } from 'react-helmet';
import tempData from './data';



//list 页面 组件
export default class Index extends React.Component {
  constructor(props) {
    super(props);

    let initialData = null;//初始化数据
    if(__SERVER__){//如果是当然是服务端执行
      initialData = props.staticContext/** ←由react-ssr.js里的StaticRouter组件赋予的,就是StaticRouter接受的context属性*/.initialData||{};
    }else{
      //客户端渲染
      initialData = props.initialData || {};
    }
    this.state = initialData;
  }

  static async getInitialProps() {
    console.log('fetch data');
    //模拟数据请求方法
    const fetchData=()=>{
      return new Promise(resolve=>{
        setTimeout(() => {
          resolve({
            code:0,
            data: tempData
          })
        }, 100);
      })
    }

    let res = await fetchData();

    return {
      fetchData:res,
      page:{
        tdk:{
          title:'列表页 - react ssr',
          keywords:'前端技术江湖',
          description:'关键词'
        }
      }
    };
  }

  componentDidMount(){
    if(!this.state.fetchData){
      //如果没有数据，则进行数据请求
      Index.getInitialProps().then(res=>{
        this.setState({
          fetchData:res.fetchData||[],
          page:res.page
        });

        // document.title = res.page.tdk.title;
      })
    }
    // if(this.state.page && this.state.page.tdk){
    //   document.title = this.state.page.tdk.title;
    // }
  }

  render() {
    //渲染数据

    const {code,data}=this.state.fetchData||{};
    const {tdk={}} = this.state.page || {};

    return <div>
      {/* ↓这样定义后 在调用renderToString之后 再调用Helmet.renderStatic() 就能拿到对应组件里定义的tdk信息了
        另外： 当前端路由指向当前路由组件时,也会将对应的tdk信息设置为这里定义的tdk信息*/}
      <Helmet>
        <title>{tdk.title}</title>
        <meta name="description" content={tdk.description}/>
        <meta name="keywords" content={tdk.keywords}/>
      </Helmet>

      {data && data.map((item,index)=>{
        return <div key={index}>
          <h3>{item.title}</h3>
          <p>{item.desc}</p>
        </div>
      })}
      {!data&&<div>暂无数据</div>}
    </div>
  }
}
